<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html>
<html lang="en">
<head>
<jsp:include page="core/templates/header.jsp"></jsp:include>
<script src="custom/js/listJobpage.js"></script>
</head>
<body class="header1 activateAppearAnimation">
	<div id="globalWrapper">
		<jsp:include page="core/templates/mainMenu.jsp"></jsp:include>
		<jsp:include page="core/templates/banner.jsp"></jsp:include>
		<!-- Content -->
		<section id="content"
			style="background: url('core/images/feature.png') repeat;">
			<div class="container">
				<div class="row mt30">
					<div class="col-md-12 mb15">
						<h2>แสดงรายการงานที่ต้องการ</h2>
					</div>
				</div>
				<div class="row mb30">
					<!-- Content -->
					<!-- Left Menu -->
					<div class="col-md-3">
						<div class="row">
							<div class="col-md-12">
								<div class="boxFocus color1">
									<s:form action="searchJobByCondition" method="post"
										theme="css_xhtml" id="myformSearch" name="myformSearch">
										<div class="row">
											<div class="col-md-12">
												<s:textfield id="keywordForm" cssClass="form-control"
													placeholder="ระบุชื่องานที่ต้องการค้นหา"></s:textfield>
											</div>
										</div>
										<div class="row mt05">
											<div class="col-md-12">ทักษะที่เกี่ยวข้อง</div>
											<div class="col-md-12">
												<input type="text" class=" form-control "
													placeholder="ทักษะ" id="aptitudeForm">
											</div>
										</div>
										<div class="row mt05">
											<div class="col-md-12">ลักษณะการว่างจ้างงาน</div>
											<div class="col-md-12">
												<s:checkboxlist
													list="#{'1':'ทั้งหมด','2':'ชั่วโมง','3':'รายวัน','4':'รายเดือน','5':'เหมาจ่ายทั้งงาน','6':'เปิดให้เสนอราคางาน'}"
													name="formatTimeForm" />
											</div>
										</div>
										<div class="row mb05">
											<div class="col-md-12">ประเภทงาน</div>
											<div class="col-md-12">
												<s:select headerKey="0" headerValue="--- ทั้งหมด ---"
													list="#{'1':'งานเร่งด่วน','2':'งานยอดนิยม','3':'งานที่ประกาศล่าสุด'}"
													cssClass="form-control" id="kindJobForm" />
											</div>
										</div>
										<div class="row mt05">
											<div class="col-md-12">ค่าตอบแทน</div>
											<div class="col-md-12">
												<s:select headerKey="0" headerValue="--- ทั้งหมด ---"
													list="#{'1':'ไม่เกิน 1000 บาท','2':'ไม่เกิน 5,000 บาท',
														'3':'ไม่เกิน 10,000 บาท','4':'ไม่เกิน 20,000 บาท','5':'ไม่เกิน 50,000 บาท','6':'มากกว่า 50,000 บาท'}"
													cssClass="form-control" id="priceForm" />
											</div>
										</div>
										<div class="row mt05">
											<div class="col-md-12">ความน่าเชื่อถือของงาน</div>
											<div class="col-md-12">
												<s:select headerKey="0" headerValue="--- ทั้งหมด ---"
													list="#{'5':'ระดับที่ 5 มากสุด','4':'ระดับที่ 4 มาก','3':'ระดับที่ 3 ปานกลาง',
														'2':'ระดับที่ 2 พอใช้','1':'ระดับที่ 1 น้อยสุด'}"
													cssClass="form-control" id="trustForm" />
											</div>
										</div>
										<div class="row mt05">
											<div class="col-md-12">จังหวัด</div>
											<div class="col-md-12">
												<select class="form-control" id="workAreaForm">
													<option value="">--- เลือก ---</option>
													<option>เชียงใหม่</option>
													<option>เชียงราย</option>
													<option>แพร่</option>
													<option>น่าน</option>
													<option>ลำปาง</option>
												</select>
											</div>
										</div>
										<div class="row mt05">
											<div class="col-md-12">วันเริ่มต้นการทำงาน</div>
											<div class="col-md-12">
												<input type="date" class="form-control"
													id="startDateOfJobForm">
											</div>
										</div>
										<div class="row mt05">
											<div class="col-md-12">วันสิ้นสุดการทำงาน</div>
											<div class="col-md-12">
												<input type="date" class="form-control"
													id="endDateOfJobForm">
											</div>
										</div>
										<div class="row mt05">
											<div class="col-md-12">
												<button type="submit"
													class="col-md-12 col-xs-12 col-sm-12 btn btn-info mt15">
													<div>
														<i class="icon-search"></i><span class="font3">
															ค้นหางาน</span>
													</div>
												</button>
											</div>
										</div>
									</s:form>
								</div>
							</div>
						</div>
						<div class="row">
							<div class="col-md-12 mt15">
								<div class="row">
									<div class="col-md-12">
										<span class="font4 textColorBlack"><b>หมวดหมู่งาน</b></span>
									</div>
								</div>
								<div class="row mt05">
									<div class="col-md-12">
										<s:iterator value="model.listCategoryJob">
											<div class="row">
												<div class="col-md-12 col-xs-6 col-sm-6 mt05"
													style="margin-left: 1em;">
													<div class="media">
														<a class="pull-left"
															href="searchJobByCategory?model.searchForm.aptitudeType=%{aptitudeTypeID}"><img
															class="img-circle img-responsive"
															src="<s:property value="image_icon"/>" alt=""
															style="width: 40px;"> </a>
														<div class="media-body">
															<s:a
																href="searchJobByCategory?model.searchForm.aptitudeType=%{aptitudeTypeID}"
																encode="true" method="post">
																<span class="font5"><b><s:property
																			value="aptitudeTypeName" /></b></span>
															</s:a>
															<br> <span class="font5">งานที่มีทั้งหมด <s:property
																	value="countSumJob" /> งาน
															</span>
														</div>
													</div>
												</div>
											</div>
										</s:iterator>
									</div>
								</div>
								<div class="row mt15 mb05">
									<div class="col-md-12">
										<hr class="lineLines">
									</div>
								</div>
								<div class="row">
									<div class="col-md-12">
										<span class="font4 textColorBlack"><b>งานใหม่ล่าสุด</b></span>
									</div>
								</div>
								<div class="row">
									<div class="col-md-12">
										<ul class="list-unstyled iconList borderList">
											<s:iterator value="model.listLastJob">
												<li><a
													href="jobDetail?model.postJobId=<s:property value="postID" />"
													class=""> <s:if test="job.jobName.length()>30">
															<s:property value="job.jobName.substring(0,30)" />...
																					</s:if> <s:else>
															<s:property value="job.jobName" />
														</s:else>
												</a></li>
											</s:iterator>
										</ul>
									</div>
								</div>
							</div>
						</div>
					</div>
					<!-- End Left Menu -->
					<div class="col-md-9 mb15">
						<s:form action="searchJobByCondition" theme="css_xhtml"
							id="myform" name="myform" method="post">
							<s:hidden name="model.searchForm.keyword"
								value="%{model.searchForm.keyword}" id="keyword"></s:hidden>
							<s:hidden name="model.searchForm.aptitude"
								value="%{model.searchForm.aptitude}" id="aptitude"></s:hidden>
							<s:hidden name="model.searchForm.formatTime"
								value="%{model.searchForm.formatTime}" id="formatTime"></s:hidden>
							<s:hidden name="model.searchForm.kindJob"
								value="%{model.searchForm.kindJob}" id="kindJob"></s:hidden>
							<s:hidden name="model.searchForm.trust"
								value="%{model.searchForm.trust}" id="trust"></s:hidden>
							<s:hidden name="model.searchForm.price"
								value="%{model.searchForm.price}" id="price"></s:hidden>
							<s:hidden name="model.searchForm.workArea"
								value="%{model.searchForm.workArea}" id="workArea"></s:hidden>
							<s:hidden name="model.searchForm.startDateOfJob"
								value="%{model.searchForm.startDateOfJob}" id="startDateOfJob"></s:hidden>
							<s:hidden name="model.searchForm.endDateOfJob"
								value="%{model.searchForm.endDateOfJob}" id="endDateOfJob"></s:hidden>
							<s:hidden name="model.searchForm.jobType"
								value="%{model.searchForm.jobType}" id="jobType"></s:hidden>
							<s:hidden name="model.searchForm.orderBy" id="orderBy"></s:hidden>
							<s:hidden name="model.searchForm.aptitudeType"
								value="%{model.searchForm.aptitudeType}"></s:hidden>
							<s:hidden name="model.pageCurrentNo" id="pageCurrentNo"></s:hidden>
							<s:hidden name="model.totalPage"></s:hidden>
							<s:if test="model.listPostJob.size==0">
								<div class="row">
									<div class="col-md-12 mb05">
										<div class="color0 boxcontent text-center">
											ไม่พบรายการที่ต้องการค้นหา</div>
									</div>
								</div>
							</s:if>
							<s:else>
								<div class="row">
									<div class="col-md-12 mb05">
										<div class="color0 boxcontent text-center">
											<div class="row textColorBlack">
												<div class="col-md-4 mb05">
													จำนวนงานทั้งหมด
													<s:property value="model.listTotalRow" />
													งาน เรียงตาม
												</div>
												<div class="col-md-4 mb05">
													<s:select headerKey="0" headerValue="--- ทั้งหมด ---"
														list="#{'1':'งานที่ประกาศล่าสุด','2':'งานที่มีจำนวนผู้ร้องขอมากที่สุด','3':'งานที่มีค่าตอบแทนมากที่สุด','4':'งานที่มีระดับความน่าเชื่อถือมากที่สุด','5':'วันเริ่มทำงาน'}"
														cssClass="form-control"
														onchange="orderByCondition(this.value);" />

												</div>
												<div class="col-md-4 mb05">
													แสดงงานลำดับที่
													<s:property value="model.listFirstRowNo" />
													ถึง
													<s:property value="model.listLastRowNo" />
												</div>
											</div>
										</div>
									</div>
									<div class="col-md-12">
										<div class="color0 boxcontent">
											<s:iterator value="model.listPostJob">
												<div class="row">
													<div class="col-md-2 col-xs-3" align="center">
														<figure>
															<s:a href="jobDetail?model.postJobId=%{postID}">
																<img class="media-object img-thumbnail"
																	data-src="holder.js/100x100" alt="100x100"
																	src="file/images/job/<s:property value="job.jobID"/>/<s:property value="job.listPicture[0].pictureLocation"/>"
																	style="width: 90px; max-height: 90px;">
															</s:a>
															<div class="mt05">
																<small><span class="textColorYelow"
																	style="font-size: 14px;"> <s:iterator
																			var="counter" begin="1" end="user.trustLevel">
																			<i class="icon-star"></i>
																		</s:iterator> <s:iterator var="counter" begin="1"
																			end="5 - user.trustLevel">
																			<i class="icon-star-empty"></i>
																		</s:iterator>
																</span> </small>
															</div>
														</figure>
													</div>
													<div class="col-md-10 col-xs-9">
														<s:a href="jobDetail?model.postJobId=%{postID}">
															<h4 class="media-heading ">
																<b><s:property value="job.jobName" /></b>
															</h4>
														</s:a>



														<span class="tagsHeader font6"><i
															class="font7 glyphicon glyphicon-tag "></i> <s:set
																name="formatTime" value="job.formatTime"></s:set> <s:if
																test="%{#formatTime=='รายชั่วโมง'}">
															ราคา <s:property value="job.paymentOfJob.fixPrice" /> บาท/ชั่วโมง
															</s:if> <s:elseif test="%{#formatTime=='รายวัน'}">
															ราคา <s:property value="job.paymentOfJob.fixPrice" /> บาท/วัน
															</s:elseif> <s:elseif test="%{#formatTime=='รายเดือน'}">
															ราคา <s:property value="job.paymentOfJob.fixPrice" /> บาท/เดือน
															</s:elseif> <s:elseif test="%{#formatTime=='เหมาจ่าย'}">
															ราคา <s:property value="job.paymentOfJob.fixPrice" /> บาท
															</s:elseif> <s:else>
															ราคา <s:property value="job.paymentOfJob.minPrice" /> - <s:property
																	value="job.paymentOfJob.maxPrice" /> บาท
															</s:else> </span>&nbsp;<span class="tagsHeader font6"><i
															class="font7 glyphicon glyphicon-bell"></i> ร้องของาน <s:property
																value="amountRequestPost" /> คน </span>&nbsp;<span
															class="tagsHeader font6"><i class="font7 icon-pin"></i>
															วันที่โพส <s:date name="postDate" format="dd MMM yyyy" />
														</span>&nbsp;<span class="tagsHeader font6"><i
															class="font7 glyphicon glyphicon-calendar"></i> ทำงาน <s:date
																name="job.startDateOfJob" format="dd MMM yyyy" /> - <s:date
																name="job.startDateOfJob" format="dd MMM yyyy" /> </span><br>
														<b class="textColorBlack">ทักษะที่ใช้ :</b>
														<s:iterator value="listAptitude">
															<span class="tags font5"><s:property
																	value="aptitudeName" /></span>
														</s:iterator>
														<p>
															<b class="textColorBlack">รายละเอียด : </b>
															<s:if test="job.descriptionOfJob.length()>172">
																<s:property
																	value="job.descriptionOfJob.substring(0,172)" />...
																					</s:if>
															<s:else>
																<s:property value="job.descriptionOfJob" />
															</s:else>
														</p>
													</div>
												</div>
												<hr class="lineLines">
											</s:iterator>
											<s:if test="model.totalPage!=0 && model.totalPage!=1">
												<div class="row">
													<div class="col-md-12 textCenter">
														<ul class="pagination ">
															<li><a href="#" onclick="selectPage(1);">«</a></li>
															<s:iterator var="counter" begin="1" end="model.totalPage">
																<s:if test="model.pageCurrentNo == #counter">
																	<li class="active"><a href="#"><s:property
																				value="top" /><span class="sr-only">(current)</span></a></li>
																</s:if>
																<s:else>
																	<li><a href="#"
																		onclick="selectPage(<s:property value="top" />);"><s:property
																				value="top" /></a></li>
																</s:else>
															</s:iterator>
															<li><a href="#"
																onclick="selectPage(<s:property value="model.totalPage" />);">»</a></li>
														</ul>
													</div>
												</div>
											</s:if>
										</div>
									</div>
								</div>
							</s:else>
						</s:form>
					</div>
				</div>
			</div>
		</section>
		<!-- Content -->
		<jsp:include page="core/templates/footer.jsp" />
	</div>
</body>
</html>
